<script setup lang="ts">
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch } from 'vue'
import { FormSchema } from '@/types/form'
import { ConfigData } from "@/api/config/types";
import { ElButton, ElSelect, ElOption, ElMessage, ElUpload } from "element-plus";
import { download } from "@/api/common/index"
import { PATH_URL } from '@/config/axios/service'


const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<ConfigData>>,
    default: () => null
  },
  formSchema: {
    type: Array as PropType<FormSchema[]>,
    default: () => []
  },
  toSetEmail: {
    type: Function as PropType<() => void>,
    default: undefined
  }
})

const rules = reactive({
})

const { register, methods, elFormRef } = useForm({
  schema: props.formSchema
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    const { setValues } = methods
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)
const handleSetEmail = () => {
  if (props.toSetEmail) {
    props.toSetEmail();
  }
}

const level = [
  { value: '3', label: '3%' },
  { value: '5', label: '5%' },
  { value: '8', label: '8%' },
  { value: '10', label: '10%' },
  { value: '20', label: '20%' },
  { value: '30', label: '30%' },
  { value: '40', label: '40%' },
  { value: '50', label: '50%' },
  { value: '60', label: '60%' },
  { value: '70', label: '70%' },
  { value: '80', label: '80%' },
  { value: '90', label: '90%' },
];

const handleRestoreSuccess = (res) => {
  ElMessage.success(res.msg);
}

const handleBackup = () => {
  download(`/config/backup`, 'backup.sql');
}

defineExpose({
  elFormRef,
  getFormData: methods.getFormData
})
</script>

<template>
  <Form :rules="rules" @register="register" style="width: 50%">
    <template #login_check_num-append>次</template>
    <template #login_check_minute-append>分钟</template>
    <template #warn_level="form">
      <div class="flex">
        <div class="el-input-group__prepend">高</div>
        <ElSelect v-model="form['warn_level_high']">
          <ElOption v-for="l in level" :value="l.value" :key="l.value">{{ l.label }}</ElOption>
        </ElSelect>
        <div class="el-input-group__prepend ml-4">中</div>
        <ElSelect v-model="form['warn_level_mid']">
          <ElOption v-for="l in level" :value="l.value" :key="l.value">{{ l.label }}</ElOption>
        </ElSelect>
        <div class="el-input-group__prepend ml-4">低</div>
        <ElSelect v-model="form['warn_level_low']">
          <ElOption v-for="l in level" :value="l.value" :key="l.value">{{ l.label }}</ElOption>
        </ElSelect>
      </div>
    </template>
    <template #state_level="form">
      <div class="flex">
        <div class="el-input-group__prepend">高</div>
        <ElSelect v-model="form['state_level_high']">
          <ElOption v-for="l in level" :value="l.value" :key="l.value">{{ l.label }}</ElOption>
        </ElSelect>
        <div class="el-input-group__prepend ml-4">中</div>
        <ElSelect v-model="form['state_level_mid']">
          <ElOption v-for="l in level" :value="l.value" :key="l.value">{{ l.label }}</ElOption>
        </ElSelect>
        <div class="el-input-group__prepend ml-4">低</div>
        <ElSelect v-model="form['state_level_low']">
          <ElOption v-for="l in level" :value="l.value" :key="l.value">{{ l.label }}</ElOption>
        </ElSelect>
      </div>
    </template>
    <template #action>
      <el-button type="primary" @click="handleSetEmail">设置邮箱
      </el-button>
      <el-button type="primary" @click="handleBackup">备份数据库
      </el-button>
      <el-upload class="ml-12px flex" :action="`${PATH_URL}/config/restore`" accept=".sql" :limit="1"
        :on-success="handleRestoreSuccess">
        <el-button type="primary">恢复数据库 </el-button>
      </el-upload>
    </template>
  </Form>
</template>
